<template>
  <el-card>
    <div class="admin">
      <div class="header">
        <el-button type="primary"
                   @click="changeDialogAddVisible">添加账号</el-button>
      </div>
      <Table :rows="rows"
             :pageOpts="pageOpts"
             @page-change="pageChange" />
      <div>
        <Page :pageOpts="pageOpts"
              @page-change="pageChange" />
      </div>
    </div>
    <!-- 模态框 -->
    <Add :dialogFormVisible="dialogAddVisible"
         @changeDialogAddVisible="changeDialogAddVisible"
         @submit="addAdmin" />
  </el-card>
</template>
<script>
import { getAdminList, addAdmin } from "@/api/admin";
import Table from "./table";
import Add from "./add";
import Page from "./page";
export default {
  components: {
    Table,
    Add,
    Page
  },
  data() {
    return {
      dialogAddVisible: {
        show: false
      },
      rows: [],
      pageOpts: {
        curPage: 1,
        limit: 10,
        total: 0,
        offset: 0,
        search: {
          sort: "createTime",
          order: "desc",
          status: "0,1"
        }
      }
    };
  },
  async created() {
    await this.getAdminList();
  },
  methods: {
    async getAdminList() {
      const {
        rows,
        curPage,
        total,
        limit,
        sort,
        offset,
        search
      } = await getAdminList(this.pageOpts);
      this.rows = rows;
      this.pageOpts = {
        curPage,
        total,
        limit,
        offset,
        search
      };
    },
    changeDialogAddVisible() {
      this.dialogAddVisible.show = !this.dialogAddVisible.show;
    },
    async addAdmin(form) {
      await addAdmin(form);
      this.$message({
        message: "请填写正确的信息",
        type: "success",
        center: true
      });
      this.changeDialogAddVisible();
      await this.getAdminList();
    },
    pageChange(pageOpts) {
      this.pageOpts = pageOpts;
      this.getAdminList();
    }
  }
};
</script>
<style lang="scss" scoped>
.admin {
  padding: 15px;
  .header {
    margin-bottom: 15px;
  }
}
</style>


